<template>
  <q-list bordered separator>
    <q-item clickable v-ripple v-for="(item, index) in options" :key="index" @click="select(item)">
      <q-item-section>{{ item.label }}</q-item-section>
      <q-item-section avatar v-if="item.value == modelValue">
        <q-icon color="primary" name="check" />
      </q-item-section>
    </q-item>
  </q-list>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ListSelect',
  props: {
    options: { type: Array, default: () => [] },
    modelValue: { type: [String, Number], default: '' }
  },
  emits: ['update:modelValue'],
  methods: {
    select (item) {
      this.$emit('update:modelValue', item.value);
    }
  }
});
</script>
